<template>
  <div>
    <div>
      <el-row :gutter="20">
        <el-col :span="4" style="text-align:right">
          <el-avatar size="large" :src="avatar"></el-avatar>
        </el-col>
        <el-col :span="18">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="comment"></el-input>
          <div style="text-align:right;margin-top:10px;margin-bottom:10px">
            <el-button type="primary" size="medium" @click="addNewComment(comment)">发布</el-button>
            <el-button type="info" size="medium">取消</el-button>
          </div>
          <!-- 评论墙 -->
          <div>
            <div style="font-size:22px;font-weight:600;margin-bottom:20px">评论墙<span>（{{totalNum}}）</span></div>
            <reply :commentList="commentTreeList" :pageFlag="pageFlag"></reply>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import reply from "@/components/comment/reply.vue"

export default {
  name: "comment",
  directives: {  },
  components: {
    reply
  },
  props:{
    commentList:{
      type:Array,
      default:null,
    },
    pageFlag:{
      type:String,
      default:null
    }
  },
  data() {
    return {
      baseUrl:null,
      avatar:store.getters.avatar,
      comment:"",
      showReplyId:-1,
      totalNum:0,
    };
  },
  computed:{
    commentTreeList(){
      if(this.commentList){
        this.totalNum = this.commentList.length;
        return this.handleTree(this.commentList,"id","parentId","childCommentList");
      }else{
        this.totalNum = 0;
        return [];
      }
      
    }
  },
  created() {
    this.baseUrl = process.env.VUE_APP_BASE_API;
  },
  methods: {
    addNewComment(content){
      //添加评论
      let obj = {
        parentId:0,
        content:content,
        pageFlag:this.pageFlag
      }
      store.dispatch('AddComment', obj).then(res=>{

      })
    },
  }
};
</script>
<style lang="scss" scoped>
.nickName{
  font-size: 18px;
  font-weight: 600;
}
.date{
  font-size: 12px;
  color:rgb(163, 157, 157);
}
</style>